<template>
<div>
  <div class="container-body w">
    <div class="card-container">
      <Row :gutter="16">
          <Col span="24">
          <Card style="width:100%;margin-top:20px">
            <!-- 职位图片 -->
            <div class="upload-container">
              <div class="demo-upload-list" v-for="item in uploadList">
                <template v-if="item.status === 'finished'">
                    <img :src="item.url">
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                    </div>
                </template>
                <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
            </div>
              <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload" multiple type="drag" :action="upimgurl" style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </div>
            <!-- 表单 -->
            <div class="">
              <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="企业名" prop="comname">
                  <Input v-model="formValidate.comname" placeholder="输入企业名"></Input>
                </FormItem>
                <FormItem label="企业性质" prop="comkindindex">
                  <Select v-model="formValidate.comkindindex" placeholder="请选择企业性质">
                    <Option :value="index" v-for="(item,index) in dbase.companykind" :key="index">{{item}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="所属行业" prop="compnayindustry">
                  <Select v-model="formValidate.compnayindustryindex" placeholder="请选择所属行业">
                    <Option :value="index" v-for="(item,index) in dbase.jobcat" :key="index">{{item}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="企业规模" prop="compnayscale">
                  <Select v-model="formValidate.compnayscaleindex" placeholder="请选择企业规模">
                    <Option :value="index" v-for="(item,index) in dbase.jobcat" :key="index">{{item}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="企业地址" prop="adress">
                  <Input v-model="formValidate.adress" placeholder="输入企业名"></Input>
                </FormItem>
                <FormItem label="描述" prop="des">
                  <Input v-model="formValidate.des" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入你的信息内容（若信息不合规，我们有权进行删除..."></Input>
                </FormItem>
                <FormItem label="公司福利" prop="companywelfare">
                  <CheckboxGroup v-model="formValidate.companywelfare">
                    <Checkbox :label="item" v-for="(item,index) in dbase.companywelfarelist" :key="index"></Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <FormItem label="姓名" prop="name">
                     <Input v-model="formValidate.name" placeholder="输入姓名"></Input>
                 </FormItem>
                 <FormItem label="手机号" prop="tel">
                      <Input v-model="formValidate.tel" placeholder="输入手机号"></Input>
                  </FormItem>

                <FormItem>
                  <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                  <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
              </Form>
            </div>
          </Card>
          </Col>
      </Row>
    </div>
  </div>

</div>
</template>
<script>
export default {
  data() {
    return {
      upimgurl:this.$http.apiurl('upimg'),
      dbase: [],

      defaultList: [],
      imgName: '',
      visible: false,
      uploadList: [],

      formValidate: {
        comname: '',
        comkindindex: '1',
        compnayindustryindex: '',
        compnayscaleindex: '',
        adress: '',
        des: '',
        companywelfare:[],
        name:'',
        tel:'',

      },
      ruleValidate: {
        comname: [{
          required: true,
          message: '企业名称不能为空',
          trigger: 'blur'
        }],
        adress: [{
          required: true,
          message: '企业地址不能为空',
          trigger: 'blur'
        }],
        des: [{
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: '描述不能低于20字',
            trigger: 'blur'
          }
        ],
        companywelfare: [{
            required: true,
            type: 'array',
            min: 1,
            message: '至少选择一项',
            trigger: 'change'
          },
        ],
        name: [{
          required: true,
          message: '姓名不能为空',
          trigger: 'blur'
        }],
        tel: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'blur'
        }],

      }
    }
  },
  created(){
    var that = this;

    that.$axios.get(that.$http.apiurl('mpinfo')).then(res => {
      console.log(res.data);
      this.dbase = res.data.dbase
    })
  },
  methods: {
    handleSubmit(name) {
      var full = this.formValidate;

      full.uid = this.uid;
      console.log(this.formValidate);
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$http.apost('authcompany', full).then(res => {
            console.log(res);
            if (res > 0) {
              this.$Message.success('提交成功!');
            } else {
              this.$Message.error('失败,请检查!');
            }
          })
        } else {
          this.$Message.error('失败,请检查重试!');
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      console.log(file);
      file.url = res;
      file.name = '';
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件名为 ' + file.name + ' 的文件格式不正确,请上传jpg 或 png的格式'
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '文件大小超出限制',
        desc: '文件名为  ' + file.name + ' 过大, 请不要超过5M.'
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 1;
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        });
      }
      return check;
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  }
}
</script>
<style lang="scss">
.card-container {
    background-color: #fff;
    padding: 10px;
    margin-top: 50px;
}
.upload-container {
  width: 100%;
  padding: 20px 0 20px 80px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
